<template>
	<view class="container">
		<view class="header">
			<text class="header-title">文档列表</text>
		</view>

		<scroll-view class="doc-list" scroll-y>
			<view v-for="doc in standard_list" :key="doc.id" class="doc-item">
				<view class="doc-name">{{ doc.industry_type }}</view>
				<view class="doc-url" @click="previewDoc(doc.file_ulr)">
					<text class="url-text">{{ doc.file_ulr }}</text>
				</view>
				<view class="doc-info">
					<view class="doc-time">添加时间: {{ doc.update_time }}</view>
					
					<view class="" style="display: flex;align-items: center;">
						<button class="download-btn" style="background-color: #2979ff;" @click="previewDoc(doc.file_ulr)">预览</button>
						<button class="download-btn" @click="downloadDoc(doc.file_ulr)">下载</button>
					</view>
					
					
				</view>
			</view>

			<view v-if="standard_list.length === 0" class="empty-state">
				<text>暂无文档</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				standard_list: [{
						id: 1,
						name: '项目需求文档',
						url: 'https://example.com/docs/project-requirements.pdf',
						time: '2023-10-15 09:30'
					},
					{
						id: 2,
						name: '技术设计方案',
						url: 'https://example.com/docs/technical-design.docx',
						time: '2023-10-18 14:20'
					}
				]
			}
		},

		onLoad() {
			this.getAreaList()
		},
		methods: {

			//获取文档列表
			getAreaList() {
				uni.request({
					url: 'https://anquan.sxpz.vip/GovApi/DangerArea/check_standard',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log(res)
							this.standard_list = res.data.datas;
						}
						console.log('standard_list', this.standard_list)
					}
				});
			},


			previewDoc(url) {
				uni.navigateTo({
					url: '/pages/index/webView?fileUrl=' + encodeURIComponent(url)
				})
			},

			downloadDoc(url) {
				window.open(url, '_blank');
			}
		}
	}
</script>

<style>
	*{-webkit-user-select: text;}
	
	.container {
		padding: 20rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}

	.header {
		text-align: center;
		padding: 30rpx;
		background: white;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #2c3e50;
	}

	.doc-list {
		height: calc(100vh - 200rpx);
	}

	.doc-item {
		background: white;
		border-radius: 8rpx;
		padding: 20rpx 150rpx;
		margin-bottom: 20rpx;
	}

	.doc-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 20rpx;
	}

	.doc-url {
		color: #3498db;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		word-break: break-all;
	}

	.doc-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.doc-time {
		font-size: 24rpx;
		color: #7f8c8d;
	}

	.download-btn {
		background-color: #27ae60;
		color: white;
		border: none;
		padding: 2rpx 30rpx;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 300rpx;
	}

	.empty-state {
		text-align: center;
		padding: 100rpx;
		color: #7f8c8d;
	}
</style>